/* Header */

#header {
  background-color: $container-color;
  position: fixed;
  width: 100%;
  z-index: 9000;
}

#header_content {
  @include clearfix;
  padding: 20px;

  @media screen and (min-width: $medium + 1) {
    padding: 30px 60px;
  }

  .vertical_divider {
    height: 52px;
    margin: 0;
    opacity: 0.5;
  }
}

// Main Navigation Links
.top-nav {
  margin: 0;
  padding: 0;
  font-size: $font16;
  clear: left;
  float: left;
  width: auto;
  text-align: left;

  @media screen and (min-width: $small + 1) {
    margin: 0;
    padding: 0;
    font-size: $font18;
    clear: left;
    float: left;
    width: auto;
    text-align: left;
  }

  li {
    list-style: none;
    float: left;
    margin-right: 24px;

    @media screen and (max-width: $medium) {
      margin-right: 20px;
    }
  }

  .active a {
    border-top: 2px solid $header-text-color;
    border-bottom: 2px solid $header-text-color;
    opacity: 0.5;
  }

  a {
    border-bottom: 2px solid $container-color;
    border-top: 2px solid $container-color;
    color: $header-text-color;
    display: block;
    padding: 5px 0;
    text-decoration: none;

    @media screen and (min-width: $small + 1) {
      padding: 13px 0;
    }

    &:hover {
      border-bottom: 2px solid $header-text-color;
      border-top: 2px solid $header-text-color;
    }
  }
}

#expand_moment, #expand_me {
  font-weight: 300;
  margin-top: $font30;

  @media screen and (max-width: $medium) {
    margin-top: 10px;
  }

  a {
    border: none;
  }
}

.header-logo {
  border: none;
  color: $header-text-color;
  float: right;
  font-size: $font20;
  font-weight: 300;
  margin: 0;
  padding: 0;
  outline: 0;
  text-align: right;
  text-transform: lowercase;
  vertical-align: middle;

  &:link, &:visited, &:hover {
    color: $header-text-color;
    border: none;
  }

  @media screen and (min-width: $small + 1) {
    font-size: $font30;
    padding-top: 4px;
  }

  &:hover {
    opacity: 1;
  }

  .expand {
    color: $highlight-text-color;
    float: right;
    font-size: $font20;
    margin-left: 10px;

    @media screen and (max-width: $small) {
      font-size: $font16;
      padding-top: 2px;
    }
  }

  .fa-sort-desc {
    padding-top: 8px;
  }

  .fa-sort-asc {
    padding-top: 17px;
  }
}

@media screen and (max-width: $small) {
  #expand_nav {
    color: $header-text-color;
    cursor: pointer;
  }
}

#expand_me {
  clear: right;
  float: right;
  text-align: right;
}

#header_spacer {
  width: 100%;
}


@media screen and (max-width: $small) {
  .large-screen {
    display: none;
  }
}

@media screen and (min-width: $small + 1) {
  .small-screen {
    display: none;
  }
}

.ifme-logo {
  @media screen and (max-width: $small) {
    &.small-screen {
      #small_nav {
        text-align: left;
        margin-bottom: 0;
        list-style: none;
        padding-left: 0;

        li {
          display: block;
          margin-bottom: 10px;
        }

        a {
          border: none;
          color: $header-text-color;
        }
      }
    }
  }

  #title_expand {
    cursor: pointer;
  }
}

.me {
  @include clearfix;
  border-bottom: 2px solid $highlight-text-color;
  border-top: 2px solid $highlight-text-color;
  color: $highlight-text-color;
  margin: 0;
  padding: 0px 0 6px;

  @media screen and (max-width: $small) {
    padding: 1px 0 4px;
  }
}

 .dim{
  opacity: 0.8;
}
